<template>
  <div class="recommended">
    <HomeTitle>推荐音乐</HomeTitle>
    <Loading v-if="!personalizeds.length" />

    <ul class="personalized">
      <RecommendedList
        v-for="item in personalizeds"
        :key="item.id"
        :item="item"
        @click.native="$router.push('/ranking?id=' + item.id)"
      />
    </ul>

    <HomeTitle>最新音乐</HomeTitle>
    <ul>
      <Loading v-if="!newsongs.length" />
      <SongItem
        v-for="item in newsongs"
        :key="item.id"
        :song="item"
        @update:current-play-song="$emit('update:current-play-song', $event)"
        :currentPlaySongId="currentPlaySongId"
        :playing="playing"
        @click.native="$emit('update:gedan', newsongs)"
      />
    </ul>
    <RecommendedFooter />
  </div>
</template>

<script>
import HomeTitle from "@/components/HomeTitle.vue";
import RecommendedList from "@/components/RecommendedList.vue";
import SongItem from "@/components/SongItem.vue";
import Loading from "@/components/Loading.vue";
import RecommendedFooter from "../components/RecommendedFooter.vue";

export default {
  props: ["currentPlaySongId", "playing", "currentPlaySong"],
  components: {
    // HelloWorld
    HomeTitle,
    RecommendedList,
    SongItem,
    Loading,
    RecommendedFooter,
  },
  data: function () {
    return {
      personalizeds: [],
      newsongs: [],
    };
  },
  created: function () {
    this.axios
      .get("https://apis.netstart.cn/music/personalized?limit=6")
      .then((res) => {
        setTimeout(() => {
          this.personalizeds = res.data.result;
        }, 1500);
      });

    this.axios
      .get("https://apis.netstart.cn/music/personalized/newsong")
      .then((res) => {
        this.newsongs = res.data.result;
      });
  },
};
</script>

<style lang="less" scoped>
h1 {
  color: red;
}

.personalized {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  // align-items: center;
  // .card {
  //   flex-basis: calc(100vw / 3 - 10px);
  //   flex-grow: 1;
  //   &:nth-child(3n + 2) {
  //     // background: red;
  //     margin: 0 5px;
  //   }
  // }
}
</style>
